<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="17">
        <sz-panel label="审批数量分析">
          <div
            id="auditCount"
            style="height: 330px;padding-bottom: 10px;"
          ></div>
        </sz-panel>
      </el-col>
      <el-col :span="7">
        <sz-panel label="流程类型统计">
          <div id="staticCategory" style="height: 330px"></div>
          <div id="image" style="height: 330px">
            <div
              style="display: flex;flex-direction:column;align-items: center;justify-content: center"
            >
              <img
                style="width:120px;margin-top:15%;margin-bottom:5px;opacity: 0.5"
                src="@/assets/empty.png"
              />
              <span style="color:#909399;font-size: 14px">暂无数据</span>
            </div>
          </div>
        </sz-panel>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapGetters } from "vuex";

export default {
  name: "flowHomeBottom",
  created() {},
  data() {
    return {};
  },
  computed: {
    ...mapGetters({})
  },
  mounted() {
    this.getLineData();
    this.getCircleData();
  },
  methods: {
    getLineData() {
      this.API.getMyAllWorkflowTaskCount().then(res => {
        this.drawLine(res.data);
      });
    },
    getCircleData() {
      this.API.getAllCategoryWorkflowTaskCount().then(res => {
        if (res.data.length > 0) {
          image.style.display = "none";
          staticCategory.style.display = "block";
          this.drawCircleMap(res.data);
        } else {
          image.style.display = "block";
          staticCategory.style.display = "none";
        }
      });
    },
    drawLine(data) {
      // var i=0;
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("auditCount"));
      let title = [];
      let data3 = [];
      let data4 = [];
      if (data) {
        data.map(item => {
          title.push(item.shortName ? item.shortName : item.name);
          data3.push(item.waitCount);
          data4.push(item.completedCount);
        });
      }
      let emphasisStyle = {
        itemStyle: {
          barBorderWidth: 1,
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowColor: "rgba(0,0,0,0.5)"
        }
      };
      // 绘制图表
      myChart.setOption({
        tooltip: {},
        legend: {
          data: ["流转中", "已完结"],
          right: 100,
          top: 20
        },
        grid: {
          left: 100
        },
        xAxis: {
          data: title,
          axisLine: { onZero: true },
          splitLine: { show: false },
          splitArea: { show: false }
        },
        yAxis: {
          inverse: false,
          splitArea: { show: false }
        },
        dataZoom: [
          {
            type: "inside",
            show: true,
            xAxisIndex: [0],
            left: "9%",
            bottom: -5,
            start: 10,
            end: 90 //初始化滚动条
          }
        ],
        series: [
          {
            name: "流转中",
            type: "bar",
            stack: "two",
            emphasis: emphasisStyle,
            barWidth: "36px",
            color: "#49ADC2",
            data: data3
          },
          {
            name: "已完结",
            type: "bar",
            stack: "two",
            barWidth: "36px",
            color: "#F09D4D",
            emphasis: emphasisStyle,
            data: data4
          }
        ]
      });
    },
    drawCircleMap(data) {
      // var i=0;
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(
        document.getElementById("staticCategory")
      );

      let data3 = [];

      if (data) {
        data.map(item => {
          data3.push({ name: item.name, value: item.count });
        });
        // 绘制图表
        myChart.setOption({
          tooltip: {
            trigger: "item",
            formatter: "{b} : {c} ({d}%)"
          },
          series: [
            {
              type: "pie",
              radius: "65%",
              center: ["50%", "50%"],
              selectedMode: "single",
              data: data3,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          ]
        });
      } else {
      }
    }
  }
};
</script>
<style scoped lang="less"></style>
